<template>
  <div class="guide-view">
    <div class="header" />
    <div class="guide-content">
      <div class="guide-sub-content">
        <p class="title">
          {{ $tr("Welcome to Ligral Web Simulation System") }}
        </p>
        <p class="proverb">
          {{
            $tr(
              '"I\'ll remind you again: The specifications and verifications can be both a help and a hindrance."'
            )
          }}
        </p>
        <p class="sub-title">{{ $tr("Start") }}</p>
        <div class="function-buttons">
          <new-project-dialog :button-type="'normal'"></new-project-dialog>
        </div>
        <div class="function-buttons">
          <open-project-dialog :button-type="'normal'"></open-project-dialog>
        </div>
        <p class="sub-title">{{ $tr("About Ligral") }}</p>
        <el-tooltip
          placement="bottom-start"
          :content="
            $tr('The user manual for this Ligral Webpage Simulation System')
          "
        >
          <a
            href="https://gitee.com/hzy15610046011/ligralpy/tree/master/docs/README.md"
            target="_blank"
            class="link"
            >{{
              $tr("Ligral WebSim Documentations")
            }}
          </a>
        </el-tooltip>
        <a
          href="https://junruoyu-zheng.gitee.io/ligral/"
          target="_blank"
          class="link"
          >{{ $tr("Ligral Official Site") }}
        </a>
        <el-tooltip
          placement="bottom-start"
          :content="$tr('The documentation for Ligral Textual Language')"
        >
          <a
            href="https://junruoyu-zheng.gitee.io/ligral/user-guide/"
            target="_blank"
            class="link"
            >{{ $tr("Ligral Language Documentations") }}
          </a>
        </el-tooltip>
        <el-tooltip
          :content="
            $tr('The Ligral Web-Sim project is supported by PyMiner project.')
          "
          placement="bottom-start"
        >
          <a href="https://gitee.com/py2cn/pyminer" target="_blank" class="link"
            >{{ $tr("Supports from PyMiner Project") }}
          </a>
        </el-tooltip>

        <p class="sub-title">{{ $tr("Recent Projects") }}</p>
        <p v-if="recentProjects.length == 0" class="no-recent-project">
          {{ $tr("No recent projects yet, please create one.") }}
        </p>
        <p v-for="recentProject in recentProjects" :key="recentProject.path">
          <span
            class="recent-project-name"
            @click="openRecentProject(recentProject.path)"
          >
            {{ recentProject.name }}
          </span>
          <text v-html="'&nbsp;'" />
          <span> {{ recentProject.path }}</span>
        </p>
      </div>
      <div class="guide-sub-content"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getRecentProjects, openProject } from "@/api/cards";
import { ProjectMeta } from "@/components/flowchart/models";
import NewProjectDialog from "@/components/panels/NewProjectDialog.vue";
import OpenProjectDialog from "@/components/panels/OpenProjectDialog.vue";
import { onMounted, ref } from "vue";
const recentProjects = ref<ProjectMeta[]>([]);

onMounted(async () => {
  recentProjects.value = await getRecentProjects();
});

const openRecentProject = async (path: string) => {
  await openProject(path);
  window.open(window.location.origin, "_self");
};
</script>

<style scoped>
.header {
  height: 16vh;
}

.guide-view {
}

.guide-content {
  display: flex;
  flex-direction: row;
  height: 84vh;
}

.guide-content .guide-sub-content {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 40px;
}

.guide-content .guide-sub-content p {
  display: block;
  text-align: left;
}

.recent-project-name {
  color: #52b6ea;
  user-select: none;
  cursor: pointer;
}

.no-recent-project {
  color: #888888;
}

.title {
  font-size: 24px;
}

.sub-title {
  font-size: 18px;
}

.proverb {
  font-style: italic;
  font-size: 0.8em;
  opacity: 0.6;
}

.link {
  margin-top: 12px;
  display: block;
}

.function-buttons {
  text-align: left;
  margin-top: 10px;
}
</style>
